<template>
	<popup-bottom :show="show" @close="closeSkuBox">
		<view class="sku-box">
			<view class="sku-header container">
				<image class="goods-img" :src="selectSkuInfo[cbImage]"></image>
				<view class="sku-goods-info">
					<view class="gname">
						{{goodsData.title}}
					</view>
					<!-- <view class="stock fs-24">库存{{ selectSkuInfo[cbStock] }}件</view> -->
					<view class="money" :style="{ color: themeColor }">
						<text class="symbol fs-26"></text>
						<text class="amount fs-38">置换补差价：￥{{ selectSkuInfo[cbPrice] | toFixed2 }}</text>
					</view>
					<view class="fs-24">
						<!-- <text>大王币：x {{selectSkuInfo[cbIntegral]}}</text> -->
						<text></text>
						<view>已选："<text v-for="(item,index) in yixuan" :key="index">{{ item.attr_name }}</text>"</view>
					</view>
				</view>
			</view>
			<scroll-view class="sku-list" scroll-y="true">
				<view class="sku-item container" v-for="(sku, sIndex) in mySpecifications" :key="sku[speId]" >
					<view class="sku-name">{{ sku.attr_group_name }}</view>
					<view class="sku-content">
						<text
							class="sku-content-item"
							v-for="(item, index) in sku.attr_list"
							:key="index"
							:style="{
								borderColor: index == sku.sidx ? '#6792DD' : '',
								color: index == sku.sidx ? '#6792DD' : '',
								backgroundColor: index == sku.sidx ? 'white' : '#f5f5f5'
							}"
							@click.stop="selectSku(sIndex, index, item)"
						>
							{{ item.attr_name }}
						</text>
					</view>
				</view>
			</scroll-view>
			<view class="sku-item container count">
				<view class="sku-name">数量</view>
				<view class="count-box">
					<text class="minus" :class="{ disabled: buyCount <= 1 }" @click="handleBuyCount('minus')">-</text>
					<input class="count-content" v-model="buyCount" :disabled="selectSkuInfo[cbStock] <= 0" />
					<text class="add" :class="{ disabled: buyCount >= selectSkuInfo[cbStock] }" @click="handleBuyCount('add')">+</text>
				</view>
			</view>
			<view class="confirm-btn "  >
				<view class="block1 flex-c-c allbtn" style="color: #FFFFFF;"  @click="handleConfirm(1)">
					立即支付
				</view>
			</view>
		</view>
	</popup-bottom>
</template>

<script>
import PopupBottom from './popup-bottom';
export default {
	components: {
		PopupBottom
	},
	filters: {
		toFixed2: function(value) {
			if (!value) return '0.00';
			return Number(value).toFixed(2);
		}
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		themeColor: {
			type: String,
			default: '#1ac792'
		},
		goodsData: {
			type: Object,
			default() {
				return [];
			}
		},
		combinations: {
			type: Array,
			default() {
				return [];
			}
		},
		specifications: {
			type: Array,
			default() {
				return [];
			}
		},
		defaultSelectIndex: {
			type: Number,
			default: 0
		},
		mjstatus: {
			type: Number,
			default: 0
		},
		combinationsProps: {
			type: Object,
			default() {
				return {
					id: 'id',
					value: 'value',
					image: 'image',
					price: 'price',
					stock: 'stock'
				};
			}
		},
		specificationsProps: {
			type: Object,
			default() {
				return {
					id: 'id',
					list: 'list',
					name: 'name'
				};
			}
		}
	},
	data() {
		return {
			buyCount: 1,
			selectedIndex: 0,
			borderWidth: uni.upx2px(2),
			mySpecifications: [],
			selectSkuInfo: {},
			idarr: [],
			idlist:[],
			status:this.mjstatus,
			sku_id:"",
			yixuan:[]
		};
	},
	watch: {
		specifications(val) {
			this.initSkuData();
		}
	},
	computed: {
		speId() {
			return this.specificationsProps.id;
		},
		speList() {
			return this.specificationsProps.list;
		},
		speName() {
			return this.specificationsProps.name;
		},
		cbValue() {
			return this.combinationsProps.value;
		},
		cbIntegral(){
			return this.combinationsProps.integral;
		},
		cbImage() {
			return this.combinationsProps.image;
		},
		cbPrice() {
			return this.combinationsProps.price;
		},
		cbStock() {
			return this.combinationsProps.stock;
		}
	},
	created() {
		if (this.specifications.length) {
			this.initSkuData();
		}
	},
	methods: {
		initSkuData() {
			this.selectedIndex = this.defaultSelectIndex;
			this.selectSkuInfo = this.combinations[this.selectedIndex];
			this.mySpecifications = this.specifications;
			var guige = [];
			this.idlist = [];
			this.mySpecifications.forEach((item, idx) => {
				//默认第一个
				this.$set(this.mySpecifications[idx], 'sidx', 0);
				item.attr_list.forEach((item3, idx3) => {
					if(idx3==0){
						this.$set(item3, 'selected', true);
					}
				})
			});
			this.selectSku(0, 0)
			
		},
		selectSku(sIndex, index) {
			this.idlist = [];
			//选中
			this.$set(this.mySpecifications[sIndex], 'sidx', index);
			//购物车逻辑
			this.mySpecifications[sIndex].attr_list.forEach((items, idx) => {
				if (idx === index) {
					this.$set(items, 'selected', true);
				} else {
					this.$set(items, 'selected', false);
				}
			});
			var guige = [];
			this.mySpecifications.forEach((item2, idx2) => {
				item2.attr_list.forEach((item3, idx3) => {
					if (item3.selected === true) {
						guige.push(item3);
						this.idlist.push(item3.attr_id);
					}
				});
			});
			var idlist2 = this.idlist.toString();
			this.goodsData.attr.forEach((itm, ids) => {
				if (idlist2 == itm.combination) {
					this.$set(this.combinations[0], 'skuPrice', itm.displaces_price);
					this.$set(this.combinations[0], 'skuIntegral', itm.integral);
					this.$set(this.combinations[0], 'skuImage', itm.pic);
					this.$set(this.combinations[0], 'combination', itm.combination);
					this.yixuan = itm.attr_list
				}
			});
		},
		handleBuyCount(type) {
			if (type === 'minus') {
				// if (this.buyCount <= 1) return;
				if(this.buyCount==1){
					this.buyCount = 1
					return
				}
				this.buyCount = this.buyCount * 1 - 1;
			}
			if (type === 'add') {
				// if (this.buyCount >= this.selectSkuInfo[this.cbStock]) return;
				this.buyCount = this.buyCount * 1 + 1;
			}
		},
		closeSkuBox() {
			this.$emit('close');
		},
		handleConfirm(is) {
			const result = this.selectSkuInfo;
			result.count = this.buyCount * 1;
			result.sku_id = this.sku_id
			this.$emit('confirm', {result:result,is:is});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex-center {
	display: flex;
	align-items: center;
}

.flex-center-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

$font-color-light: #999999;
$page-bg-color-grey: #f5f5f5;

.fs-24 {
	min-width: 400rpx;
	font-size: 24upx;
	display: flex;
	justify-content: space-between;
}

.fs-26 {
	font-size: 26upx;
}

.fs-38 {
	font-size: 38upx;
}

.container {
	width: 690upx;
	margin: 0 auto;
}

.sku-box {
	min-height: 500upx;
	background-color: white;
	padding-bottom: 20upx;
	font-size: 28upx;
	color: #333333;
	.sku-header {
		display: flex;
		padding: 40upx 0 20upx;
		.goods-img {
			width: 200upx;
			height: 200upx;
			border-radius: 6upx;
			border: 4upx solid white;
			flex: none;
			// margin-top: -80upx;
			background: #FFFFFF;
		}
	}
	.sku-goods-info {
		margin-left: 20upx;
		.gname{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-align: justify;
			overflow: hidden;
		}
		.money {
			border: none;
			padding-bottom: 0;
		}
		.stock {
			color: $font-color-light;
		}
	}
	.sku-list {
		max-height: 600upx;
	}
	.sku-item {
		padding: 10upx 0;
		.sku-name {
			font-size: 30upx;
		}
		.sku-content {
			border-bottom: 2upx solid $page-bg-color-grey;
			padding: 20upx 0;
			@extend .flex-center;
			flex-wrap: wrap;
			.sku-content-item {
				padding: 16upx 20upx;
				border-radius: 6upx;
				margin: 0 30upx 20upx 0;
				border: 2upx solid transparent;
			}
		}
		&.count {
			@extend .flex-center;
			justify-content: space-between;
			.count-box {
				@extend .flex-center;
				text,
				.count-content {
					@extend .flex-center-center;
					width: 70upx;
					height: 70upx;
					font-size: 32upx;
					border: 2upx solid $page-bg-color-grey;
					margin-top: 10rpx;
				}
				.add,
				.minus {
					font-size: 44upx;
				}
				.count-content {
					border-width: 2upx 0;
					text-align: center;
				}
			}
		}
	}
	.confirm-btn {
		// @extend .flex-center-center;
		display: flex;
		justify-content: space-between;
		padding: 0 80upx;
		height: 80upx;
		border-radius: 10upx;
		color: white;
		font-size: 32upx;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
		.block1{
			width: 477rpx;
			height: 74rpx;
			border-radius: 10rpx;
		}
		.block2{
			width: 277rpx;
			height: 74rpx;
			background: #FAE24E;
			border-radius: 10rpx;
		}
	}
}

[class*='disabled'] {
	color: $font-color-light;
	opacity: 0.7;
}
</style>
